<template>

  <div>
    <div class="lng-padding top-bar lng-flex">
      <popup-picker :data="stationList" v-model="station" @on-show="onShow" @on-hide="onHide" show-name
                    value-text-align="left"
                    @on-change="onChange" placeholder="请选择统计类别"></popup-picker>

      <x-input v-model="name" placeholder="请输入产品名称"></x-input>


      <div class="search-btn" @click="search()">
        <i class="icon icon-search"></i>
      </div>
    </div>

    <view-box ref="viewBox">
      <group class="content equipment-content">
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div @click="getDetail()">
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button" @click="change()">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button">更换</div>
          </div>
        </cell>
        <cell>
          <div class="lng-flex lng-jc-sb">
            <div>
              <div class="title">1#可燃气体探头 <span class="tag blue-tag">状态：在线</span></div>
              <div class="des">类型：全启式安全阀 有效期：2017—08-09 的就撒道具卡沈荡几卡的</div>
            </div>
            <div class="blue-button" @click="change()">更换</div>
          </div>
        </cell>
      </group>

    </view-box>

    <tab-bar selected="1"></tab-bar>


    <div v-transfer-dom>
      <x-dialog v-model="showDetailDialog" class="dialog-text dialog-equipment-detail" hide-on-blur>
        <div class="dialog-title">
          设备详情
          <i class="icon icon-close" @click="showDetailDialog=false"></i>
        </div>
        <div class="dialog-detail">
          <ul>
            <li>设备编号：100212312</li>
            <li>站点名称：安燃燃气加气站</li>
            <li>设备类型：全启式安全阀</li>
            <li>标记名称：1#泵电机</li>
            <li>有效日期：2013-09-09</li>
            <li>产品编号：21212121</li>
            <li>产品名称：泵电机</li>
            <li>生产厂家：西安博康电子有限公司</li>
            <li>生产厂家电话：0573-88291929</li>
            <li>生产日期：2013-30-33</li>
            <li>安装厂家：苏州拓维</li>
            <li>安装厂家电话：12312211222</li>
            <li>安装人：屠华</li>
            <li>安装日期：2016-09-09</li>
            <li>剩余更换日期：<span class="blue-text">1234天</span></li>
          </ul>
        </div>

      </x-dialog>
    </div>

  </div>


</template>

<script>
  import {
    ViewBox,
    Flexbox,
    Group,
    Picker,
    XInput,
    FlexboxItem,
    PopupPicker,
    Popup,
    Cell,
    TransferDom,
    XDialog
  } from 'vux'
  import tabBar from '@/components/equipment/public/tab-bar'


  export default {
    directives: {
      TransferDom
    },
    components: {
      tabBar,

      XDialog,
      ViewBox,
      Cell,
      Group,
      XInput,
      Popup,
      PopupPicker,
      Flexbox,
      Picker,
      FlexboxItem,
    },
    mounted() {

    },
    data () {
      return {
        showDetailDialog: false,
        name: "",
        showSearchBox: true,
        area: [],
        station: [],
        stationList: [[
          {
            name: '嘉通站',
            value: 'jiatong',
          },
          {
            name: '嘉的萨满的萨克的萨克的撒接口的站',
            value: 'jiadtong',
          },
        ]],
        showPopup: false,
        years: []
      }
    },
    watch: {
      years(val){
        console.log(val)
      }
    },
    methods: {
      getDetail(){
        this.showDetailDialog = true;
      },
      change(){
        this.$router.push({
          name: 'equipmentChange',
          query: {id: 11}
        })
      },
      toggleSearchBox(){
        this.showSearchBox = !this.showSearchBox;
      },
      search(){
        this.showSearchBox = false;
      },
      goPath(name){
        this.$router.push({
          name: name
        });
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>

<style scoped>
  .content {
    margin: 1.3rem 0 1.8rem;
  }

  .content .lng-flex {
    padding: 10px;
  }

  .content .lng-flex .title {
    padding: 5px 0;
    font-size: 14px;
    color: #000;
  }

  .content .lng-flex .des {
    padding: 5px 0;
    font-size: 12px;
  }

  .search-btn {
    color: #4791d2;
    font-weight: bold;
    padding: 0 4px;
    text-align: center;
    width: 10%;
  }

  .search-btn .icon {
    font-size: 20px;
  }

  .top-bar {
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
  }

  .top-bar:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 0;
    height: 1px;
    border-top: 1px solid #C0BFC4;
    color: #C0BFC4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .top-bar .vux-cell-box {
    width: 40%;
    margin: 0 5px;
  }

  .top-bar .vux-x-input {
    width: 40%;
    margin: 0 5px;
  }

  .top-bar.lng-flex > div {
    flex: inherit;
    white-space: nowrap;
    overflow: hidden;
  }

  .weui-cell {
    padding: 0;
  }

  .vux-cell-box:before {
    border: none;
    height: 0;
  }

  .lng-padding {
    padding: 4px 0;
  }

  .blue-button {
    float: right;
    padding: 4px 18px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
  }

  .vux-x-icon {
    width: .4rem;
    height: .4rem;
    vertical-align: middle;
    color: #4791d2;
  }

</style>
<style>
  .top-bar .weui-cell {
    padding: 5px 2px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
  }

  .equipment-content .weui-cell__ft {
    width: 100%;
    text-align: left;
  }

</style>

